<template>
  <div>饼图</div>
  <div id="myEcharts" :style="{ width: '1000px', height: '400px', backgroundColor: '#fff' }"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { debounce } from '@/utils/utils'
let item_index = 0
let timer = ref(null)
let myChart
var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
let option = {
  // 标题组件
  title: {
    text: '饼图内容自动轮播,鼠标移入停止轮播，移出重新轮播',
    x: 'center',
    y: 'top',
    textStyle: {
      fontSize: 20
    }
  },
  // 图例组件，展现了不同系列的标记(symbol)，颜色和名字。
  legend: {
    top: '10%',
    left: 'center'
  },
  // 提示框组件
  tooltip: {
    trigger: 'item'
  },
  // 系列
  series: [
    {
      type: 'pie',
      center: ['50%', '50%'],
      // 半径
      radius: ['24%', '45%'],
      // 是否顺时针
      clockwise: true,
      // 是否在扇区扇面之间有空隙
      avoidLabelOverlap: true,
      // 高亮状态的扇区和标签样式。
      emphasis: {
        scale: true,
        scaleSize: 30,
        itemStyle: {
          borderColor: '#f3f3f3',
          borderWidth: 1
        }
      },
      // 图形样式
      itemStyle: {
        color: function (params) {
          console.log(params, 'params>>>>>>>>>>>>>')
          return colorList[params.dataIndex]
        }
      },
      label: {
        show: true,
        position: 'outside',
        formatter: '{a|{b}：{d}%}\n{hr|}',
        // a表示使用样式a
        rich: {
          hr: {
            backgroundColor: 't',
            borderRadius: 3,
            width: 3,
            height: 3,
            padding: [3, 3, 0, -12]
          },
          a: {
            padding: [-30, 15, -20, 15]
          }
        }
      },
      // 引导线
      labelLine: {
        normal: {
          length: 20,
          length2: 30,
          lineStyle: {
            width: 1
          }
        }
      },
      data: [
        {
          name: '北京',
          value: 5600
        },
        {
          name: '上海',
          value: 3600
        },
        {
          name: '广州',
          value: 1500
        },
        {
          name: '深圳',
          value: 2000
        },
        {
          name: '未知',
          value: 899
        },
        {
          name: '海外',
          value: 4000
        }
      ]
    }
  ]
}
const myChart_Dispatch = val => {
  let index = val >= 0 ? val : item_index
  myChart.dispatchAction({
    type: 'hideTip',
    seriesIndex: 0,
    // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
    // dataIndex: index == 0 ? 5 : index - 1
    dataIndex: [0, 1, 2, 3, 4, 5]
  })
  // 显示提示框
  myChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: index
  })
  // 取消高亮指定的数据图形
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    // dataIndex: index == 0 ? 5 : index - 1
    dataIndex: [0, 1, 2, 3, 4, 5]
  })
  // 高亮指定的数据图形
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: index
  })
}
const interval_fn = val => {
  timer.value = setInterval(() => {
    myChart_Dispatch()
    item_index++
    if (item_index > 5) {
      item_index = 0
    }
  }, 3000)
}
const myChartInit = () => {
  let chartDom = document.getElementById('myEcharts')
  myChart = echarts.init(chartDom)
  option && myChart.setOption(option)
  myChart.on('mouseover', params => {
    clearInterval(timer.value)
    timer.value = null
    myChart_Dispatch(params.dataIndex)
    item_index = params.dataIndex + 1
  })
  myChart.on('mouseout', params => {
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: [0, 1, 2, 3, 4, 5]
    })
    interval_fn()
  })
}
onMounted(() => {
  myChartInit()
  interval_fn()
})
</script>
<style lang="scss"></style>
